// Vue.component("组件名", { ...组件选项 })
Vue.component("counter", {
	template: `<button v-on:click="countAdd">{{ x }}, {{ count }}</button>`,
	props: ["x"],
	data() {
		return {
			count: 1
		}
	},
	methods: {
		countAdd() {
			this.count++
		}
	}
})

// function f(x) {
// }
// f()
// f()
// f()
// f()


Vue.component("item-component", {
	template: "<li>{{ text }}</li>",
	props: ["text"]
})

const app = new Vue({
	el: "#app",
	// 状态
	data: {
		msg: "hello vue",
		list: [
			"item1",
			"item2",
			"item3",
		],
		itemText: "",
		counterText: "第一个counter",
		count: 23
	},
	methods: {
		addItem() {
			// console.log(this.itemText)
			this.list.push(this.itemText)
			// this.list = [this.itemText, ...this.list, ]
		}
	}
})

